<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        img {
            width: 15px;
            vertical-align: middle;
            border: 0;
        }

        body {
            font-size: 13px;
            line-height: 20px;
        }

        a {
            font-size: 13px;
            color: #000;
            text-decoration: none;
        }

        a:hover {
            font-size: 13px;
            color: #f00;
        }

        .no_circle {
            list-style-type: none;
            display: none;
        }
    </style>

    <script>
        function show() {
            if (document.getElementById("art").style.display === "block") {
                document.getElementById("art").style.display = "none";
            } else {
                document.getElementById("art").style.display = "block";
            }
        }
    </script>
</head>

<body>
    <b><img src="./images/folder.png" alt="">树形菜单：</b>
    <ul>
        <a href="javascript:onclick = show()"> <img src="./images/folder_1.png" alt="">网页设计</a>
    </ul>
    <ul id="art" class="no_circle">
        <li><img src="./images/file-word.png" alt="">HTML</li>
        <li><img src="./images/file-word.png" alt="">CSS</li>
        <li> <img src="./images/file-word.png" alt="">JAVASCRIPT</li>
    </ul>

</body>

</html>